 document.addEventListener('DOMContentLoaded', (event) => {
    // 获取页面元素
    const myList = document.getElementById('myList');
    const itemInput = document.getElementById('itemInput');
    const addItemBtn = document.getElementById('addItem');
    const editModal = document.getElementById('editModal');
    const closeBtn = document.querySelector('.close');
    const editForm = document.getElementById('editForm');
    const editItemInput = document.getElementById('editItemInput');

    let listItems = []; // 存储列表项的数组

    // 添加新项的功能
    addItemBtn.addEventListener('click', () => {
    const newItem = itemInput.value.trim();
    if (newItem) {
    listItems.push(newItem);
    renderList(); // 渲染列表
    itemInput.value = ''; // 清空输入框
}
});

    // 渲染列表的功能
    function renderList() {
    myList.innerHTML = ''; // 清空列表
    listItems.forEach((item, index) => {
    const li = document.createElement('li');
    li.textContent = item;

    const editBtn = document.createElement('button');
    editBtn.textContent = '编辑';
    editBtn.addEventListener('click', () => {
    editItemInput.value = item; // 设置编辑框的内容为当前项的内容
    editModal.style.display = 'block'; // 显示模态框
    currentIndexToEdit = index; // 记录当前编辑项的索引
});

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.addEventListener('click', () => {
    listItems.splice(index, 1); // 从数组中删除当前项
    renderList(); // 重新渲染列表
});

    li.appendChild(editBtn); // 添加编辑按钮到列表项
    li.appendChild(deleteBtn); // 添加删除按钮到列表项
    myList.appendChild(li); // 添加列表项到列表容器
});
}

    let currentIndexToEdit = null; // 记录当前编辑项的索引

    // 保存编辑项的功能
    editForm.addEventListener('submit', (event) => {
    event.preventDefault();
    if (currentIndexToEdit !== null) {
    listItems[currentIndexToEdit] = editItemInput.value.trim(); // 更新数组中对应索引的项的内容
    renderList(); // 重新渲染列表
    editModal.style.display = 'none'; // 隐藏模态框
    currentIndexToEdit = null; // 重置当前编辑项的索引
}
});

    // 关闭模态框的功能
    closeBtn.addEventListener('click', () => {
    editModal.style.display = 'none'; // 隐藏模态框
    currentIndexToEdit = null; // 重置当前编辑项的索引
});

    // 点击模态框外部区域时关闭模态框的功能
    window.onclick = (event) => {
    if (event.target === editModal) {
    editModal.style.display = 'none'; // 隐藏模态框
    currentIndexToEdit = null; // 重置当前编辑项的索引
}
};

    renderList(); // 初始化渲染列表
});